<template>
    <div>
        <img class="dt" src="../../assets/img_chanpin/datu.jpg" alt="" style="margin-bottom: 4px;">
        <div class="xdh">
                <div class="center">
                    <div>
                        <div class="xiaoxiang"  @click="$router.push('/home/chanpinliebiao/'+0)">
                            <a href="#">糕点系列</a>
                        </div>
                        <div class="xiaoxiang" @click="$router.push('/home/chanpinliebiao/'+1)">
                            <a href="#">休闲食品</a>
                        </div>
                        <div class="xiaoxiang" @click="$router.push('/home/chanpinliebiao/'+2)">
                            <a href="#">节日食品</a>
                        </div>
                        <div class="xiaoxiang" @click="$router.push('/home/chanpinliebiao/'+3)">
                            <a href="#">面包主食</a>
                        </div>
                        <div class="xiaoxiang" @click="$router.push('/home/chanpinliebiao/'+4)">
                            <a href="#">坚果系列</a>
                        </div>
                        <div class="xiaoxiang" @click="$router.push('/home/chanpinliebiao/'+5)">
                            <a href="#">速冻食品</a>
                        </div>
                    </div>
                </div>
            </div>
        <div class="content">
           
            <!-- 小导航 -->
            
            <div class="mbx">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>产品</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <!-- <div class="xzq">
                <el-select class="xzq1" v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select class="xzq2" v-model="value1" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input class="shuru" v-model="input" placeholder="请输入内容"></el-input>
                <el-button class="btn" type="warning" plain>筛选</el-button>
            </div> -->
            <div class="lbt">
                <img :src="ChanPinList.img">
            </div>
            <div class="under">
                <div class="left">
                    <h1>{{ChanPinList.name}}</h1>
                    <p>品 名 :<span>{{ChanPinList.name}}</span></p>
                    <p>规 格 :<span>{{ChanPinList.guige}}</span></p>
                    <p>主 料 :<span> {{ChanPinList.zhuliao}}</span></p>
                    <p>口 感 :<span> {{ChanPinList.kougan}}</span></p>
                    <p>适 应 人 群 :<span> {{ChanPinList.shiyingrenqun}}</span></p>
                    <p>储 存 条 件 :<span> 请 放 置 于 干 燥 阴 凉 处</span></p>
                </div>
                <div class="zhong"></div>
                <div class="right">
                    <p>{{ChanPinList.title}}</p>
                    <h2>价格：￥{{ChanPinList.jiage}}</h2>
                    <div class="btns">
                        <button @click="setShop">加入购物车</button>
                        <button @click="buy">立即购买</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
import httpApi from '@/myaxios'
export default {
    data() {
        return {
            options: [{
                value: '选项1',
                label: '糕点系列'
            }, {
                value: '选项2',
                label: '休闲食品'
            }],
            options1: [{
                value: '选项1',
                label: '散点'
            }, {
                value: '选项2',
                label: '礼盒'
            }],
            value: '',
            value1: '',
            input: '',
            ChanPinList:{
                id: "",
                img:[],
                
                name: "",
                type1: "",
                type2: "",
                // jiage: '',
                title: "",
                guige: "",
                zhuliao: "",
                kougan: "",
                shiyingrenqun: "",
                chucuntiaojian: "",
            },
            cid:this.$route.params.id,
            GouWuChe:[],
            DingDan:[]

        }
    },
    methods: {
        setShop() {
            let uid = localStorage.getItem('userId')
            let num = 1
            let id = Number(this.GouWuChe[this.GouWuChe.length-1].id)+1
             httpApi.commodity.getGouWuChe({cid:this.cid,uid,num,id}).then(res=>{
                    alert ('加入购物车成功')
            })
            
            
        },
        buy(){
            let uid = localStorage.getItem('userId')
            let num = 1
            let id = Number(this.DingDan[this.DingDan.length-1].id)+1
            httpApi.commodity.getDingDan({cid:this.cid,uid,num,id}).then(res=>{
                alert('添加订单成功')
            })
            
            
        }

    },  
    mounted () {
        // console.log(this.cid);
        httpApi.commodity.queryById({id:this.cid}).then(res=>{
            console.log(res.data[0]);
            this.ChanPinList=res.data[0]
            console.log(this.ChanPinList);
        }),
        // 查询购物车
        httpApi.commodity.queryGouWuChe().then(res=>{
            // console.log(res);
            this.GouWuChe = res.data
            // console.log(this.GouWuChe);
        }),

        // 查询订单
        httpApi.commodity.queryDingDan().then(res=>{
            this.DingDan = res.data
            console.log(this.DingDan);
        })
    },
    

}
</script>

<style lang="scss" scoped>
div {
    background-color: #FCF9F0;


    .content {
        width: 1200px;
        margin: 0 auto;

        >.lbt {
            width: 1200px;
            height: 700px;
            overflow: hidden;

            >img {
                object-fit: fill;
                width: 100%;
                height: 100%;
            }
        }

        .tp {
            width: 100%;
            height: 500px;
        }

        .under {
            font-family: "microsoft Yahei";
            font-size: 16px;
            color: #996600;
            display: flex;
            flex: 1;
            border-left: 1px solid #d9ae6e;
            border-bottom: 1px solid #d9ae6e;
            border-right: 1px solid #d9ae6e;
            padding-bottom: 10px;
            >.right {
                width: 600px;
                text-align: left;
                padding-left: 50px;
                font-size: 14px;
                padding-right: 10px;
                position: relative;
                >p {
                    margin-top: 50px;
                }

                >h2 {
                    color: crimson;
                }

                >.btns {
                    position: absolute;
                    right: 50px;
                    bottom: 30px;
                    //background-color: #d9ae6e;
                    width: 500px;
                    padding: 20px 0;
                    justify-content: center;

                    >button {
                        width: 200px;
                        height: 50px;
                        border-radius: 10px;
                        border: 1px solid #996600;
                        color: #996600;
                        background-color: #FCF9F0;
                        font-size: 20px;
                    }

                    :nth-child(2) {
                        width: 200px;
                        margin-left: 30px;
                        background-color: crimson;
                        color: #fff;
                    }
                }
            }

            >.zhong {
                height: 200px;
                border-left: 1px solid #d9ae6e;
                margin-top: 50px;
            }

            >.left {
                width: 600px;
                text-align: left;
                padding-left: 50px;

                >h1 {
                    font-weight: 300;
                }
            }
        }
    }

    .mbx {
        margin-bottom: 20px;
    }

    .xzq {
        width: 100%;
        display: flex;
        margin-bottom: 20px;
    }

    .xzq1 {
        width: 340px;
        margin-right: 10px;
    }

    .xzq2 {
        width: 340px;
        margin-right: 10px;
    }

    .shuru {
        width: 340px;
        margin-right: 10px;
    }

    .btn {
        width: 150px;
    }

    .dt {
        margin-top: -8px;
        width: 100%;
    }

    >.xdh {
        background-color: #E6DFC9;
        margin: 0;
        padding: 0;
        position: relative;
        top: -8px;

        >.center {
            width: 1200px;
            margin: 0 auto;

            >div {
                display: flex;
                height: 60px;
                background-color: #E6DFC9;
                padding: 0;

                >.xiaoxiang {
                    width: 13%;
                    background-color: transparent;

                    >a {
                        text-decoration: none;
                        color: #000;
                        font-size: 24px;
                        line-height: 60px;
                    }

                }

            }

        }

    }
}</style>